<template>
	<view>
		<view class="u-flex user-box">
			<view class="avatorcss" style="margin-right: 10rpx;" >
				<!-- <u-avatar @click="uploadFile" :src="vuex_user.avatar_url ? vuex_user.avatar_url : '/static/logo.png'" size="70"></u-avatar> -->
				<oss-upload></oss-upload>
			</view>
			<view class="u-flex-1">
				<view  style="font-size: 18px;padding-bottom: 20rpx;">{{vuex_user.name}}</view>
				<view style="font-size: 14rpx;" class="u-tips-color">邮箱号: {{vuex_user.email}}</view>
			</view>
		</view>
		
		<view style="margin-top: 20rpx; background-color: #ffffff;">
			<u-cell-group>
				<u-cell icon="setting" title="个人信息" :isLink="true" url="/pages/center/baseInfo"></u-cell>
			</u-cell-group>
		</view>
		
		<view class="content">
			<u-cell-group>
				<u-cell icon="rmb-circle" @click="myOrder" title="我的订单"></u-cell>
				<u-cell icon="star" @click="myCollect" title="我的收藏"></u-cell>
				<u-cell icon="map" @click="addressManage" title="地址管理"></u-cell>
			</u-cell-group>
		</view>
		
		<view class="content">
			<u-cell-group>
				<u-cell icon="reload" title="退出登录" @click="logout"></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pic:'https://uviewui.com/common/logo.png',
				show:true
			}
		},
		onLoad() {
			if(!uni.$u.utils.isLogin()) return;  //没有登陆的时候就不向下进行了
		},
		methods: {
			async logout(){
				//请求 api  这个地方得向下依次进行，因为如果异步，当vuex_token 清除之后回自动跳转到登陆页面
				await uni.$u.api.authLogout();
				
				//清除缓存中token 和用户信息
				this.$u.vuex('vuex_user',{});
				this.$u.vuex('vuex_token',null);
				
				//跳转到首页
				uni.$u.toast('退出成功');
				setTimeout(()=>{
					uni.$u.route({
						type: 'reLaunch',
						url: 'pages/index/index'
					});
				},1000);
			},
			async addressManage(){
				uni.$u.route({
					url: '/pages/address/address'
				});
			},
			myCollect(){
				uni.$u.route({
					type: 'navigateTo',
					url: '/pages/collect/collect'
				});
			},
			myOrder(){
				uni.$u.route({
					type: 'navigateTo',
					url: "/pages/order/order"
				})
			}
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #e0e0e0;
}
.u-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
	
	.u-flex-1 {
		flex: 1;
	}
	/* 水平居中 */
	.u-row-center {
		justify-content: center;
	}
	
	/* 右边对齐 */
	.u-row-right {
		justify-content: flex-end;
	}
	.iconClass{
		margin-left: 10rpx;
		padding: 10rpx;
	}
	.avatorcss{
		width: 50px;
		height: 50px;
	}
}
.content{
	margin-top: 20rpx;
	background-color: #ffffff;
}
.camera{
	width: 54px;
	height: 44px;
	
	&:active{
		background-color: #ededed;
	}
}
.user-box{
	background-color: #fff;
	padding-left: 30rpx;
	padding-right: 20rpx;
	padding-bottom: 30rpx;
}
</style>